<script setup lang="ts">
import { getTenantListApi } from "@/api/business/index"
import { ContentWrap } from '@/components/ContentWrap'
import Basic from './Compontents/Basic.vue'
import { reactive, unref, ref, watch } from "vue"
import background1 from "@/assets/imgs/Group 427318771 2.png"
import background2 from "@/assets/imgs/Group 427318771 1.png"
import { ElCard, ElDatePicker } from 'element-plus'
import { Echart } from '@/components/Echart'
import { getDataStatisticsApi, getdictApi, positionListAll, getdataStatisticsApi } from "@/api/home/index";
import { Search, Refresh } from '@element-plus/icons-vue'
const state = reactive({
  option: [{
    id: "1",
    label: "首页"
  }, {
    id: "2",
    label: "党建引领"
  }, {
    id: "3",
    label: "人资招聘"
  }, {
    id: "4",
    label: "公示公告"
  }, {
    id: "5",
    label: "新都特色"
  }, {
    id: "6",
    label: "办事指南"
  }, {
    id: "7",
    label: "人才培训"
  }],
  basicData: [
    {
      name: "企业端",
      title: "入驻企业数",
      number: 0,
      imageUrl: background1
    }, {
      name: "企业端",
      title: "本月新增企业数",
      number: 0,
      imageUrl: background1
    }, {
      name: "应聘端",
      title: "注册用户数",
      number: 0,
      imageUrl: background2
    }, {
      name: "应聘端",
      title: "本月新增用户数",
      number: 0,
      imageUrl: background2
    }
  ] as any,
  EChartsOption: {
    title: {
      top: "0%",
      left: "2%",
      text: "网站访问量统计",
      textStyle: {
        color: "#131414",
        fontFamily: "HarmonyOS Sans SC-Regular, HarmonyOS Sans SC",
        fontSize: "16px"
      }
    },
    legend: {
      top: "2%",
      data: ['网站访问量统计'],
      right: "2%",
      textStyle: {
        color: "#73767A",
        fontFamily: "HarmonyOS Sans SC-Regular, HarmonyOS Sans SC",
        fontSize: "12px"
      },

      itemWidth: 10,
      itemHeight: 10,
      padding: 5,
      show: false,
    },
    tooltip: {},
    xAxis: {
      name: "模块名称",
      data: [],
      axisLine: { onZero: true },
      splitLine: { show: false },
      splitArea: { show: false }
    },
    yAxis: {
      name: "点击量/次"
    },
    grid: {
      bottom: "5%",
      top: "12%",
      left: "5%",
      right: "7%"
    },
    series: [
      {
        name: '网站访问量统计',
        color: "#1C53D9",
        type: 'bar',
        stack: 'one',
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
          }
        },
        data: []
      }
    ]
  } as any,
  valueTime_echarts: "",
  dictData: [],
  dataList: [],
  ruleForm: {
    createTimeStart: "",
    createTimeEnd: "",
    deptIds: "",
    recruitmentPositionIds: "",
    tenantId: ""
  } as any,
  times: [] as any,
  positionOptions: [] as any,
  tableData: [] as any,
  tableDatas: [] as any,
})
const onSearch = () => {
  console.log("echarts:", state.valueTime_echarts);
  getList()
}
const onReset = () => {
  state.valueTime_echarts = ""
  getList()
}
const getdictApis = async () => {
  await getdictApi().then((res: any) => {
    console.log(res);
    state.dictData = res.data
    getList()
  })
}
getdictApis()

// 表格
const getList = async () => {
  await getDataStatisticsApi({
    startTime: state.valueTime_echarts ? state.valueTime_echarts[0] ? state.valueTime_echarts[0] : "" : "",
    endTime: state.valueTime_echarts ? state.valueTime_echarts[1] ? state.valueTime_echarts[1] : "" : ""
  }).then((res: any) => {
    state.basicData[0].number = res.data.companyCount
    state.basicData[1].number = res.data.companyCountMonth
    state.basicData[2].number = res.data.userCount
    state.basicData[3].number = res.data.userCountMonth
    state.EChartsOption.xAxis.data = []
    state.EChartsOption.series[0].data = []
    res.data.moduleVos.forEach(element => {
      state.option.forEach(elements => {
        if (element.moduleValue == elements.id) {
          state.EChartsOption.xAxis.data.push(elements.label)
        }
      })
      state.EChartsOption.series[0].data.push(element.moduleCount)
    });
    console.log("------", res.data.positionVos, state.dictData);

    res.data.positionVos.forEach(elementl => {
      state.dictData.forEach((element: any) => {
        if (element.dictType == "position_classify") {
          element.dictDataList.forEach(elements => {
            if (elements.dictValue == elementl.positionClassify) {
              elementl.dictLabel = elements.dictLabel ? elements.dictLabel : ""
            }
          });
        }

      });
    })
    state.dataList = res.data.positionVos
  })
}
// 查询
const onSearchs = () => {
  console.log("查询");
  if (state.times) {
    state.ruleForm.createTimeStart = state.times[0]
    state.ruleForm.createTimeEnd = state.times[1]
  }
  dataStatisticstableApi()

}
// 重置
const onResets = () => {
  console.log("重置");
  state.times = []
  state.ruleForm.createTimeStart = ""
  state.ruleForm.createTimeEnd = ""
  state.ruleForm.deptIds = ""
  state.ruleForm.recruitmentPositionIds = ""
  state.ruleForm.tenantId = ""
  dataStatisticstableApi()
}
const positionListAllApi = async () => {
  await getTenantListApi({ pageNum: 1, pageSize: 1000000 }).then(res => {
    console.log("公司", res);
    state.positionOptions = res.rows
  })
}


const dataStatisticstableApi = async () => {
  await getdataStatisticsApi(state.ruleForm).then(res => {
    console.log("表格数据", res);
    state.tableData = []
    state.tableDatas = []
    let obj1 = {//人数
      initialScreening: res.data.initialScreening || 0,
      departmentScreening: res.data.departmentScreening || 0,
      writtenExamination: res.data.writtenExamination || 0,
      interview: res.data.interview || 0,
      physicalExamination: res.data.physicalExamination || 0,
      toBeHired: res.data.toBeHired || 0,
      entry: res.data.entry || 0
    }
    let obj2 = {//成绩率
      initialScreeningPassRate: res.data.initialScreeningPassRate || 0,
      departmentScreeningPassRate: res.data.departmentScreeningPassRate || 0,
      writtenExaminationPassRate: res.data.writtenExaminationPassRate || 0,
      interviewPassRate: res.data.interviewPassRate || 0,
      physicalExaminationPassRate: res.data.physicalExaminationPassRate || 0,
      entryRate: res.data.entryRate || 0,
    }
    for (const key in obj2) {
      obj2[key] = Number(obj2[key]).toFixed(2) * 100
      obj2[key] = obj2[key]
    }
    state.tableData.push(obj1)
    state.tableDatas.push(obj2)
  })
}
dataStatisticstableApi()
positionListAllApi()
// 表格头部信息
const headerCellStyle: any = {
  "background": "#F2F6FC",
  "height": "48px"
}
// 
const rowStyle: any = {
  "height": "48px"
}


</script>
<template>
  <div>
    <Basic :data="state.basicData" />
    <ElCard shadow="hover" class="mb-20px echarts_times_card">
      <div class="flex aic ">
        <div class="echarts_times">
          <ElDatePicker v-model="state.valueTime_echarts" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-DD" />
        </div>
        <ElButton type="primary" :icon="Search" @click="onSearch">
          查询
        </ElButton>
        <ElButton :icon="Refresh" @click="onReset">
          重置
        </ElButton>
      </div>
    </ElCard>
    <ElCard shadow="hover" class="mb-20px echarts_times_card">
      <!-- <div class="echarts_times">
        <ElDatePicker v-model="state.valueTime_echarts" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="echartsTime()" value-format="YYYY-MM-DD" />
      </div> -->
      <Echart :options="state.EChartsOption" :height="470" />
    </ElCard>
    <ElCard shadow="hover" class="mb-20px echarts_times_card">
      <!-- <div class="echarts_times">
        <ElDatePicker v-model="state.valueTime_echarts" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="echartsTime()" value-format="YYYY-MM-DD" />
      </div> -->
      <div class="fonts18 fontw700">
        职位点击量统计
      </div>
      <div style="margin-top: 30px;">
        <el-table :data="state.dataList" style="width: 100%" :headerCellStyle="headerCellStyle" :rowStyle="rowStyle">
          <el-table-column prop="dictLabel" label="所属职位类别" />
          <el-table-column prop="positionCount" label="点击次数/次" />
          <el-table-column type="index" label="点击量排名" width="300" />
        </el-table>
      </div>
    </ElCard>
    <ContentWrap style="margin: 16px 0;">
      <div class="fonts18 fontw700" style="margin-bottom: 16px;">
        招聘通过率
      </div>
      <div class="flex aic">
        <div class="flex aic">
          <el-date-picker clearable range-separator="To" v-model="state.times" format="YYYY-MM-DD " type="daterange"
            value-format="YYYY-MM-DD HH:mm:ss" label="" start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <div class="flex aic" style="margin: 0 16px;">
          <el-select v-model="state.ruleForm.tenantId" placeholder="企业">
            <el-option v-for="item in state.positionOptions" :key="item.id" :label="item.companyName"
              :value="item.id" />
          </el-select>
        </div>
        <!-- <div class="flex aic" style="margin: 0 16px;">
          <el-select v-model="state.ruleForm.recruitmentPositionIds" clearable placeholder="应聘职位" style="width: 100%">
            <el-option v-for="item in state.positionOptions" :key="item.id" :label="item.positionName" :value="item.id" />
          </el-select>
        </div> -->
        <ElButton class="margin-left16" type="primary" :icon="Search" @click="onSearchs">
          查询
        </ElButton>
        <ElButton class="margin-left16" :icon="Refresh" @click="onResets">
          重置
        </ElButton>
      </div>
      <!-- <div class="flex data_tip aic">
        <img src="@/assets/imgs/w1.png" alt="" />
        <p class="fonts14" style="margin-top: 16px;">温馨提示：选择时问后，统计该时问段内进入初筛的简历数以及后续的流程变化数据</p>
      </div> -->
      <el-table :data="state.tableData" style="width: 100%;margin-top: 16px;" :headerCellStyle="headerCellStyle"
        :rowStyle="rowStyle">
        <el-table-column prop="initialScreening" label="初筛人数" />
        <el-table-column prop="departmentScreening" label="应聘部门筛选人数" />
        <el-table-column prop="writtenExamination" label="笔试人数" />
        <el-table-column prop="interview" label="待约面试人数" />
        <el-table-column prop="physicalExamination" label="体检审查人数" />
        <el-table-column prop="toBeHired" label="待入职人数" />
        <el-table-column prop="entry" label="入职人数" />
      </el-table>
      <el-table :data="state.tableDatas" style="width: 100%;margin-top: 16px;" :headerCellStyle="headerCellStyle"
        :rowStyle="rowStyle">
        <el-table-column prop="initialScreeningPassRate" label="初筛通过率">
          <template #default="scope">
            <div>{{ scope.row.initialScreeningPassRate.toFixed(2) + '%' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="departmentScreeningPassRate" label="应聘部门筛选通过率">
          <template #default="scope">
            <div>{{ scope.row.departmentScreeningPassRate.toFixed(2) + '%' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="writtenExaminationPassRate" label="笔试通过率">
          <template #default="scope">
            <div>{{ scope.row.writtenExaminationPassRate.toFixed(2) + '%' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="interviewPassRate" label="面试通过率">
          <template #default="scope">
            <div>{{ scope.row.interviewPassRate.toFixed(2) + '%' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="physicalExaminationPassRate" label="体检审查通过率">
          <template #default="scope">
            <div>{{ scope.row.physicalExaminationPassRate.toFixed(2) + '%' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="entryRate" label="入职率">
          <template #default="scope">
            <div>{{ scope.row.entryRate.toFixed(2) + '%' }}</div>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
</template>
<style lang="less" scoped>
.echarts_times_card {
  position: relative;
}

.echarts_times {
  // position: absolute;
  // right: 20px;
  // z-index: 999;
  margin-right: 16px;
}
</style>
